<template>
  <div class="bg-white shop-goods-list-wrapper px-3">
    <!-- name 值不写 默认v-model显示的就是每一个索引值 -->
    <el-tabs v-model="tabIndex" @tab-click="handleClick">
      <el-tab-pane 
        v-for="(tab, index) in tabbars" 
        :key="index" 
        :label="tab.name">
          <button-search ref="buttonSearch" :placeholder="'要搜索的商品名称'" @search="searchEven">
            <template #left>
              <router-link :to="{name: 'shop_goods_create'}">
                <el-button type="success" size="small">发布商品</el-button>
              </router-link>
              <el-button style="margin-left: 10px;" type="warning" size="small">恢复商品</el-button>
              <el-button type="danger" size="small" @click="batchEelShop">批量删除</el-button>
              <el-button size="small">上架</el-button>
              <el-button size="small">下架</el-button>
              <el-button size="small">推荐</el-button>
            </template>
            <template #form>
              <!-- 高级搜索表单 -->
              <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-form-item label="商品编码" class="mb-0">
                  <el-input size="small" v-model="form.name" placeholder="审批人"></el-input>
                </el-form-item>
                <el-form-item label="商品类型" class="mb-0">
                  <el-input size="small" v-model="form.code" placeholder="审批人"></el-input>
                </el-form-item>
                <el-form-item label="商品类型" class="mb-0">
                  <el-select size="small" v-model="form.type" placeholder="请选者商品类型">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="商品分类" class="mb-0">
                  <el-input size="small" v-model="form.category" placeholder="请选者商品分类"></el-input>
                </el-form-item>
                <el-form-item class="mb-0">
                  <el-button type="info" size="small" @click="searchEven">搜索</el-button>
                  <el-button size="small" @click="clearSearch">清空筛选条件</el-button>
                </el-form-item>
              </el-form>
            </template>
          </button-search>
           <el-table
            class="mt-3"
            :data="tableData[tabIndex].list"
            style="width: 100%" 
            border 
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="45"
              align="center">
            </el-table-column>
            <el-table-column
              label="商品"
              width="380">
              <template slot-scope="scope">
                <div class="media d-flex align-items-center">
                  <img class="mr-3" style="width: 60px;height: 60px;" :src="scope.row.cover">
                  <div class="media-body">
                    <p class="mt-0 mb-2">{{scope.row.title}}</p>
                    <p class="mb-0">分类：{{scope.row.category}}</p>
                    <p class="mb-0">时间：{{scope.row.create_time}}</p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="type" align="center"
              label="商品类型">
            </el-table-column>
            <el-table-column
              align="center"
              prop="sale_count"
              label="实际销量">
            </el-table-column>
            <el-table-column
              align="center"
              prop="order"
              label="商品排序">
            </el-table-column>
            <el-table-column
              prop="status"
              align="center"
              label="商品状态">
              <template slot-scope="scope">
                <!-- 上下架的状态 -->
                <!-- <el-button class="ml-0" :type="scope.row.status == 1 ? 'success' : 'danger'" size="mini" plain @click="changeShopStatus(scope.row)">{{scope.row.status == 1 ? '上架' : '下架'}}</el-button> -->
                <el-button class="ml-0" type="success" size="mini" plain @click="scope.row.ischeck = 1">审核通过</el-button>
                <el-button class="ml-0" type="danger" size="mini" plain @click="scope.row.ischeck = 2">审核拒绝</el-button>
              </template>
            </el-table-column>
            <el-table-column
              prop="stock"
              align="center"
              label="总库存">
            </el-table-column>
            <el-table-column
              prop="pprice"
              align="center"
              label=" 价格(元)"
            >
            </el-table-column>
            <el-table-column
              prop="id"
              align="center"
              label="操作" 
              width="150">
              <template slot-scope="scope">
                <el-button-group>
                  <el-button type="primary" plain size="mini">修改</el-button>
                  <el-button type="danger" plain size="mini" @click="delTableRow(scope.$index)">删除</el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
          <div style="height: 40px;"></div>
          <el-footer class="bg-white pl-3 d-flex border-top align-items-center px-0 position-fixed" style="bottom: 0; left: 200px; right: 0;z-index: 2;">
            <div style="flex: 1;" class="px-2">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="tabbars[index].currentPage"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
              </el-pagination>
            </div>
          </el-footer>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import buttonSearch from '@/components/common/button-search.vue'
export default {
  components: {
    buttonSearch
  },
  data() {
    return {
      tabIndex: 0,
      tabbars: [
        {name: '审核中'},
        {name: '出售中'},
        {name: '已下架'},
        {name: '库存预警'},
        {name: '回收站'}
      ],
      form: {
        name: '',
        code: '',
        type: '',
        category: ''
      },
      superSearch: false,
      tableData: [],
      multipleSelection: [],
    };
  },
  created(){
    this._getTableData()
    this.tableData[this.tabIndex]
  },
  methods: {
    // 选项卡点击
    handleClick(tab, event) {
      console.log(tab.index)
    },
    // 重置搜索条件
    clearSearch(){
      this.form = {
        name: '',
        code: '',
        type: '',
        category: ''
      }
      // 关闭高级搜索
      this.$refs.buttonSearch[this.tabIndex].closeSuperSearch()
    },
    // 全部条件搜索
    searchEven(e = ''){
      // 简单搜索
      if(typeof e === 'string'){
        console.log('简单搜索')
      }else{
        // 高级搜索
        console.log('高级搜索')
      }
    },
    // 表格选中的change事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 删除当前商品(表格数据)
    delTableRow(index){
      this.$confirm('是否删除当前商品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData[this.tabIndex].list.splice(index, 1)
        this.$notify({
          type: 'success',
          title: '提示',
          message: '删除成功',
          duration: 3000
        })
      })
    },
    // 批量删除
    batchEelShop(){
      let checkedList = this.multipleSelection
      if(!checkedList.length){
        this.$message({
          message: '请先选中商品才再进行删除！',
          type: 'warning'
        });
        return
      }
      this.$confirm('是否删除选择的商品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        let currentList = this.tableData[this.tabIndex].list
        for(let i=0; i<currentList.length; i++){
          let flag = checkedList.some(v=> currentList[i].id === v.id)
          if(flag){
            currentList.splice(i, 1)
            i--
          }
        }
        this.multipleSelection = []
        this.$notify({
          type: 'success',
          title: '提示',
          message: '删除成功',
          duration: 3000
        })
      })
    },
    // 修改商品的上下架
    changeShopStatus(data){
      data.status = data.status == 1 ? 0 : 1
    },
    _getTableData(){
      for(let i=0; i<this.tabbars.length; i++){
        this.tableData.push({
          currentPage: 1,
          list: this._forAddTableData(i)
        })
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    _forAddTableData(i){
      let arr = []
      for(let j=0; j<20; j++){
        arr.push({
          id:j+1,
          title: `荣耀 V10全网通 标配版 ${i+1} - ${j+1}`,
          cover: 'http://static.yoshop.xany6.com/2018071718294208f086786.jpg',
          create_time: '2019-07-17 18:34:14',
          category:"手机",
          type:"普通商品",
          sale_count:20,
          order:100,
          status:1, 
          stock:200,
          pprice:1000,
          ischeck:1 // 0未审核，1通过，2不通过
        })
      }
      return arr;
    }
  }
}
</script>

<style scoped lang="less">
  .shop-goods-list-wrapper{
    margin: -20px;
    margin-top: -1rem;
    margin-bottom: 0;
    /deep/ .el-table th{
      padding: 8px 0;
    }
    /deep/ .el-table td{
      padding: 8px 0;
    }
  }
  
</style>